<template>
    <div style="background-color: #F0F2F5; height: 100vh; padding-top: 8%">
        <div class="p-4 shadow-2 border-round " :class="!isMobile ? 'w-2/5': 'w-4/5' " style="margin: 0 auto;background-color: white">
            <div class="flex flex-col mb-5 items-center">
                <img :src="favicon" alt="Image" height="50" width="50" class="mb-3"/>
                <div class="text-900 text-3xl font-medium mb-3">自动化运维工具库</div>
                <span class="text-600 font-medium line-height-3">还没有账号？</span>
                <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
                   @click="() => router.push({name: 'register'})">现在创建</a>
            </div>
            <div>
                <form @submit.prevent='onSubmit'>
                    <label class="block text-900 font-medium mb-2 mt-3">用户名</label>
                    <IconField iconPosition="left">
                        <InputIcon class="pi pi-user"></InputIcon>
                        <InputText id='username' v-model="username" class='w-full'
                                   :class="{ 'p-invalid': errors.username }"/>
                    </IconField>
                    <small class="p-error">
                        {{ errors.username }}
                    </small>

                    <label class="block text-900 font-medium mb-2 mt-3">密码</label>
                    <IconField iconPosition='left'>
                        <InputIcon class="pi pi-lock"></InputIcon>
                        <InputText id='password' v-model="password" type="password" class="w-full"
                                   :class="{ 'p-invalid': errors.password }"/>
                    </IconField>
                    <small class="p-error">
                        {{ errors.password }}
                    </small>
                    <Button type="submit" :loading="loading" label="登录" class="w-full mt-4"></Button>
                </form>
            </div>
        </div>
    </div>
    <Toast></Toast>
</template>

<script setup>
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
import {useForm} from 'vee-validate';
import * as yup from 'yup';
import store from "@/store/index.js";
import router from "@/router.js";
import favicon from '@/assets/favicon.ico'
import Toast from "primevue/toast";
import {ref} from "vue";

const isMobile = ref(window.innerWidth < 768);

const loading = ref(false)
let loginSchema = yup.object().shape({
    username: yup.string().max(20, '字符长度过多').required('请输入用户名'),
    password: yup.string().max(20, '字符长度过多').required('请输入密码'),
});

const {defineField, handleSubmit, errors} = useForm({
    validationSchema: loginSchema,
});

const [username] = defineField('username');
const [password] = defineField('password');

const onSubmit = handleSubmit(async (values) => {
    loading.value = true
    try {
        await store.dispatch('Login', {...values})
        await router.push({path: '/'})
    } finally {
        loading.value = false
    }
});

</script>
